<template>
	<!-- <z-nav-bar backState="2000" title="新增功能"></z-nav-bar> -->
	<!-- 公共组件-每个页面必须引入 -->
	<!-- <public-module></public-module> -->
	<!-- 
		view class="time">版本1.2.0</view>
		<view class="nav_list" @click="onPageJump('/pages/demo/datePopup')">
			<image src="../../static/demo/icon_case.png" mode="aspectFit"></image>
			<text>日期时间选择控件</text>
		</view>
		<view class="time">版本1.1.1</view>
		<view class="nav_list" @click="onPageJump('/pages/shortVideo')">
			<image src="../../static/demo/icon_case.png" mode="aspectFit"></image>
			<text>防抖音滑动视频（进度调整，丝滑流畅，支持app，小程序、H5)</text>
		</view>
		<view class="nav_list" @click="onPageJump('/pages/sdkDemo/appUpdate')">
			<image src="../../static/demo/icon_case.png" mode="aspectFit"></image>
			<text>APP版本更新新升级（新增wgt包静默更新功能，apk包会静默下载完成然后弹窗安装）</text>
		</view>
		<view class="nav_list" @click="onPageJump('/pages/demo/popup')">
			<image src="../../static/demo/icon_case.png" mode="aspectFit"></image>
			<text>popup弹窗组件新升级（新增偏上弹窗，偏移，zIndex）</text>
		</view>
		<view class="nav_list">
			<image src="../../static/demo/icon_case.png" mode="aspectFit"></image>
			<text>新增前端身份证验证规则代码（在plugins/utils.js的checkIdCard查看使用）</text>
		</view>
		<view class="nav_list">
			<image src="../../static/demo/icon_case.png" mode="aspectFit"></image>
			<text>修改微信小程序统一分享规则（在config/utils.js的wxShare查看使用）</text>
		</view>
        <view class="time">版本1.1.0</view>
        <view class="nav_list">
        	<image src="../../static/demo/icon_case.png" mode="aspectFit"></image>
        	<text>APP开屏引导图（在components/module/guide-pages.vue）</text>
        </view>
        <view class="nav_list" @click="onPrivacyAgreement">
        	<image src="../../static/demo/icon_case.png" mode="aspectFit"></image>
        	<text>APP隐私协议弹窗（在manifest.json里面）</text>
        </view>
		<view class="time">版本1.0.7</view>
		<view class="nav_list" @click="onPageJump('/pages/template/poster/goodsPoster')">
			<image src="../../static/demo/icon_case.png" mode="aspectFit"></image>
			<text>商品海报生成</text>
		</view>
		<view class="nav_list" @click="onTokenJump('/pages/template/poster/scanCode')">
			<image src="../../static/demo/icon_case.png" mode="aspectFit"></image>
			<text>推广海报生成</text>
		</view>
		<view class="time">版本1.0.6</view>
		<view class="nav_list" @click="onTokenJump('/pages/template/editInfo')">
			<image src="../../static/demo/icon_case.png" mode="aspectFit"></image>
			<text>个人信息</text>
		</view>
		<view class="time">版本1.0.5</view> 
	-->

	
	<view>
		<view class="nav_list" v-for="(item, index) in tabList" :key="item.id" :class="{ active: item.id === currentId }"
			@click="onPageJump(index)">
			{{ item.name }}
		</view>
		<!-- <view class="nav_list" @click="onPageJump(0)">
			<image src="../../../../static/swiper/navibar-logo.png" mode="aspectFit"></image>
			<text>{{ tabList[0].name }}</text>
		</view> -->
	</view>
	<!-- <div class="nav_list"  >
		
	</div> -->

	<!-- <z-navigation></z-navigation> -->
</template>

<script>
import { getCategoryList } from "@/api/goods.js";
export default {
	data() {
		return {
			currentId: 0,
			tabList: [], //左侧标题列表
			categoryList: [], //右侧分类数据列表
			topImg: "", //顶部图片
		};
	},
	created() {
		this.loadData();
		uni.hideTabBar();
	},
	//第一次加载
	onLoad(e) {
		// 隐藏原生的tabbar
		uni.hideTabBar();
		this.loadData();
	},
	//页面显示
	onShow() {
		// 隐藏原生的tabbar
		uni.hideTabBar();
	},
	//方法
	methods: {
		async loadData() {
			let list = await getCategoryList(0);
			this.tabList = list.data.result;
			this.currentId = list.data.result[0].id;
			this.loadListContent(0);
		},
		/**
	 * 加载列表内容
	 */
		loadListContent(index) {
			this.topImg = this.tabList[index];
			this.categoryList = this.tabList[index].children;
		},
		/**
	 * 一级分类点击
	 */
		tabtap(item, i) {
			if (item.id != this.currentId) {
				this.currentId = item.id;
				this.loadListContent(i);
			}
		},
		onPageJump(index) {
			this.loadListContent(index);
			let data = encodeURIComponent(JSON.stringify(this.categoryList));
			uni.navigateTo({
				url: '/pages/tabbar/home/template/common2?data=' + data
			});
		},
		onTokenJump(url) {
			this.judgeLogin(() => {
				uni.navigateTo({
					url: url
				});
			});
		},
		onPrivacyAgreement() {
			// #ifdef H5
			window.open("https://ask.dcloud.net.cn/article/36937");
			// #endif
			// #ifndef H5
			this.$store.commit("setWebViewUrl", "https://ask.dcloud.net.cn/article/36937");
			uni.navigateTo({
				url: '/pages/template/webView'
			});
			// #endif
		}
	},
	//页面隐藏
	onHide() { },
	//页面卸载
	onUnload() { },
	//页面下来刷新
	onPullDownRefresh() { },
	//页面上拉触底
	onReachBottom() { },
	//用户点击分享
	onShareAppMessage(e) {
		return this.wxShare();
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/mixin.scss';

.nav_list {
	background-color: #fff;
	// padding: 30upx;
	padding-left: 25px;
	padding-bottom: 10px;
	// padding-left: 40px;
	display: flex;
	align-items: center;
	position: relative;
	// margin-bottom: 0upx;
	width: 800px;
	font-size: 20upx;

	// width: -webkit-fill-available;
	&:active {
		background-color: #f5f5f5;
	}

	image {
		width: 40upx;
		height: 40upx;
	}

	text {
		font-size: 28upx;
		color: #333;
		margin-left: 30upx;
	}

	&::after {
		content: '';
		position: absolute;
		// right: 30upx;
		left: 300px;
		top: 50%;
		transform: translateY(-50%);
		width: 40upx;
		height: 40upx;
		background-image: url('');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}
}

// .time {
// 	padding: 20upx 30upx;
// 	font-size: 24rpx;
// 	color: #666;
// }
</style>
